<template>
<div class="login">
  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" 
    label-width="0px" class="login-container" v-focus @keyup.enter.native="handleSubmit">
    <h3 class="title">欢迎来到，智能监控分析系统</h3>
    <el-form-item prop="account">
      <el-input  type="text" v-model.trim="loginForm.account" auto-complete="off" placeholder="账号" suffix-icon="icon-thrid-71"></el-input>
    </el-form-item>
    <el-form-item class="passw" prop="checkPass">
      <el-input type="password" v-model="loginForm.checkPass" auto-complete="off" placeholder="密码" suffix-icon="icon-thrid-mima-copy"></el-input>
    </el-form-item>
    <el-checkbox v-model="loginForm.checked" class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="plain" style="width:100%; " @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
  import util from '../util/util'
  export default {
    directives: {
      focus: {
        // 指令的定义
        inserted: function(el) {
          el.focus();
        }
      }
    },
    data() {
      return {
        logining: false,
        loginForm: {
          account: '',
          checkPass: '',
          checked: true
        },
        rules: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
        
      };
    },
    mounted() {
        let userobj = util.getCookie();
        if(userobj){
          this.loginForm.account = userobj.username;
          this.loginForm.checkPass = userobj.password;
        }
        
    },
    methods: {
      handleReset() {
        this.$refs.loginForm.resetFields();
      },
      handleSubmit(ev) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            //_this.$router.replace('/table');
            this.logining = true;
            //NProgress.start();
            //-----------------设置cookie-----------------
            let username = this.loginForm.account;
            let pass = this.loginForm.checkPass;
            if (this.loginForm.checked == true) {
                //传入账号名，密码，和保存天数3个参数
                util.setCookie(username, pass, 7);
            }else {
                console.log("清空Cookie");
                //清空Cookie
                util.clearCookie();
            }
            //-----------------请求登录-----------------
            let loginParams = { username: username, password: pass};
            this.$api.user.login(loginParams).then(response => {
              this.logining = false;
              if(response.data.code == "6000"){
                let user = response.data.data;
                //-----------------------------------
                let token = "isLogin"; //应该从后端获取token
                //-----------------------------------
                this.$store.dispatch("login", token);
                this.$store.dispatch("setUser", user);
                this.$router.push(this.$route.query.redirect || '/');//跳转到query.redirect对应的地址或根目录
              }else{
                  this.$message({
                    message: util.getErrorInfo(response.data.code),
                    type: 'error'
                  });
              }
            }).catch(error => {
              this.logining = false;
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }

</script>

<style lang="scss" scoped>
  .login{
    height:100%;
    width:100%;
    background:url("/static/background.jpg") no-repeat center;
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: -50px auto 0;
    width: 350px;
    padding: 35px 35px 15px 35px;
    //border: 1px solid #eaeaea;
    //box-shadow: 0 0 10px #cac6c6;
    background: url("/static/loginbg.png") no-repeat center;
    background-size:100% 100%;

    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #fff;
    }
    .remember {
      margin: 0px 0px 35px 0px;
      color:#fff;
    }

    .el-button{
      background: url("/static/button2.png");
      background-size:100% 100%;
      border:none;
      color:#fff;
    }
    .el-button:hover {
    //color: #2481B8;
    //border-color: #bdd9ea;
    background: url("/static/buttonhover.png");
    background-size:100% 100%;
    border:none;
    color:#fff;
    }
    
  }
  
</style>
<style scoped>
 .el-input >>> .el-input__inner{
      border:1px solid #00BAE078;
    }
.el-form-item.is-error >>> .el-input__inner {
    border-color: #F56C6C;
}
</style>

